<template>
  <div class="content-footer">
    <div class="footer-input">
      <!-- 到底部 -->
      <!-- <div class="gotoButtom">
        <i class="el-icon-arrow-down"></i>
      </div> -->
      <div v-if="isShowCommon" class="library-container-outer top">
        <div class="library-container">
          <div class="header">
            <h1 class="title">常用语</h1>
            <div @click="closeHandle" class="close-button">
              <i class="el-icon-close"></i>
            </div>
          </div>
          <div class="content">
            <div v-if="commonPhrasesList.length > 0">
              <!--ClickLog Start-->
              <div
                @mouseenter="hoverLogHandle(item.id)"
                @click="clickLogHandle(item)"
                :class="`item-container ${
                  item.id === commonId ? 'selected' : ''
                }`"
                :key="item.id"
                v-for="item in commonPhrasesList"
              >
                <div class="title-container">
                  <div class="title">{{ item.title }}</div>
                </div>
                <div class="content">
                  {{ item.commonPhrases }}
                </div>
                <div class="operation">
                  <div @click="() => editCommon(item)" class="edit-icon">
                    <i class="el-icon-edit"></i>
                  </div>
                  <div @click="() => deleteCommon(item.id)" class="delete-icon">
                    <i class="el-icon-delete"></i>
                  </div>
                </div>
              </div>
              <!--ClickLog End-->
            </div>
          </div>
          <div class="bottom" @click="addCommon">
            <div class="add-icon"><i class="el-icon-plus"></i></div>
            <p class="add-text">添加常用语</p>
          </div>
        </div>
      </div>
      <div
        :class="`footer-input-content-padding ${
          upload.fileList.length > 0 ? 'footer-input-content' : ''
        }`"
      >
        <div
          v-if="upload.fileList.length > 0"
          class="footer-input-top"
          style="padding: 5px 14px 14px; margin-top: -5px"
        >
          <div class="footer-input-paperclipDiv footer-input-paperclip">
            <div
              class="paperclipDiv"
              v-for="file in upload.fileList"
              :key="file.id"
            >
              <div
                class="ds-icon"
                style="
                  font-size: 32px;
                  width: 32px;
                  height: 32px;
                  margin-right: 4px;
                "
              >
                <i class="el-icon-document"></i>
              </div>
              <div class="paperclipTextDiv">
                <div class="paperclipTextDiv-title">
                  {{ file.fileName }}
                </div>
                <div
                  v-if="file.isUploading || file.parsing || file.uploadError"
                >
                  <div class="ellipsis file-loading" v-if="file.isUploading">
                    <i class="el-icon-loading"></i>上传中...
                  </div>
                  <div class="ellipsis file-loading" v-if="file.parsing">
                    <i class="el-icon-loading"></i>解析中...
                  </div>
                  <div class="ellipsis file-loading" v-if="file.uploadError">
                    上传失败
                  </div>
                </div>
                <div v-else class="file-name">
                  {{ file.fileType }} {{ file.fileSize }}
                </div>
              </div>
              <span class="delete-icon-outer">
                <div class="delete-icon">
                  <div
                    class="ds-icon"
                    style="
                      font-size: 14px;
                      width: 8px;
                      height: 8px;
                      line-height: 8px;
                    "
                    @click="delectFile(file.id)"
                  >
                    <i
                      style="margin-left: -2px; margin-top: -2px"
                      class="el-icon-close"
                    ></i>
                  </div></div
              ></span>
            </div>
          </div>
        </div>
        <div class="input-content input-div">
          <div class="input-content-div">
            <textarea
              id="chat-input"
              class="input-textarea"
              placeholder="输入文字点击提交对 AI 进行提问"
              rows="2"
              v-model="messageContent"
              @keyup.enter="sendMessage"
            ></textarea>
            <div class="div-textarea">{{ messageContent }}</div>
          </div>
          <div class="footer-icon">
            <el-button
              v-show="isShowIcon"
              @click="clearMessages"
              size="small"
              class="iconfont icon-qingchu"
              circle
            ></el-button>
            <div class="footer-icon-right">
              <div class="footer-icon-outer">
                <!-- <div class="footer-icon-paperclip">
                  <div
                    class="ds-icon"
                    style="font-size: 23px; width: 23px; height: 23px;margin-right: 20px;"
                  >
                    <el-button
                      style="margin: 0 5px"
                      class="el-icon-paperclip"
                      @click="handleImport"
                      circle
                    ></el-button>
                  </div>
                </div> -->
                <div class="footer-icon-paperclip">
                  <div
                    class="ds-icon"
                    style="font-size: 36px; width: 36px; height: 36px"
                  >
                    <el-tooltip
                      effect="dark"
                      content="输入常用语标题，可快捷调用常用语"
                      placement="top"
                    >
                      <svg-icon @click="commonPhrases1" icon-class="commonPhrases" />
                    </el-tooltip>
                  </div>
                </div>

                <div class="footer-icon-send">
                  <div class="footer-icon-send-outer">
                    <div
                      class="ds-icon"
                      style="font-size: 32px; width: 32px; height: 32px"
                    >
                      <el-button
                        v-if="!anserLoading"
                        :disabled="
                          anserLoading ||
                          messageContent.trim().length == 0 ||
                          parsing
                        "
                        size="small"
                        circle
                        type="primary"
                        class="aq-send-btn"
                        icon="el-icon-s-promotion"
                        @click="sendMessage"
                      ></el-button>
                      <el-button
                        v-else
                        circle
                        type="primary"
                        class="aq-send-btn"
                        @click="ctrlAbout"
                        size="small"
                      >
                        <i class="iconfont icon-lujing"></i>
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 文件导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        class="upload"
        accept=".doc, .docx, .pdf"
        action="#"
        multiple
        :limit="10"
        :before-upload="beforeUpload"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!-- <div class="el-upload__tip" slot="tip">
           <el-checkbox v-model="upload.synchronous" />是否同步到简历库
          </div>
          <div class="el-upload__select" v-if="upload.synchronous">
            <el-select
              class=""
              v-model="JDUpdateId"
              placeholder="请选择要上传的岗位JD"
            >
              <el-option
                v-for="item in fileOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div> -->
          <span>仅允许导入doc、docx、pdf格式文件。</span>
        </div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改常用语对话框 -->
    <el-dialog custom-class="common-phrases-dialog" :title="title" :visible.sync="open" width="600px" append-to-body>
      <div class="editor-modal">
        <div class="header">
          <p class="subtitle">常用语</p>
          <p class="description">
            可以将经常问的内容设为常用语
          </p>
        </div>
        <div
          class="spin-container content"
        >
          <div class="spin-content-wrapper" >
            <textarea
              v-model="form.commonPhrases"
              class="input-area"
              placeholder="输入常用内容"
              autofocus=""
            ></textarea>
            <div class="name-container"  @click="() => editConversation()">
              <div class="name-container">
                <input 
                  ref="conversationNameInput" 
                  v-model="form.title" 
                  placeholder="点击设置唤醒词，输入唤醒词可快速调用这个常用语" 
                  class="input" />
                <!-- <div  class="action">完成</div> -->
              </div>
            </div>
          </div>
          <!---->
        </div>
        <div class="bottom">
          <!-- <button
            type="button"
            class="kimi-button default cancel"
          >
            取消</button
          ><button
            type="button"
            class="kimi-button confirm"
          >
            新建
          </button> -->
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ChatInput",
  props: {
    isShowIcon: {
      type: Boolean,
      default: true,
    },
    anserLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      messageContent: "",
      fileName: "",
      docId: "",
      fileOptions: [],
      JDUpdateId: "",
      // 解析接口调用时的loading
      parsing: false,
      title: "新建常用语",
      open: false,
      form: {},
      isShowCommon: false,
      selectCommon: {},
      commonId: "",
      commonPhrasesList: [],
      isUploadFile: false,
      // 文件导入参数
      uploadError: false,
      upload: {
        // 是否显示弹出层（文件导入）
        open: false,
        // 弹出层标题（文件导入）
        title: "",
        // 是否更新已经存在的文件数据
        synchronous: false,
        fileList: [],
      },
    };
  },
  created() {
    const storedCommonPhrasesList = localStorage.getItem('commonPhrasesList');
    if (storedCommonPhrasesList) {
      this.commonPhrasesList = JSON.parse(storedCommonPhrasesList);
    }
  },
  methods: {
    editConversation() {
      this.$nextTick(() => {
        this.$refs.conversationNameInput.focus();
      });
    },

    sendMessage() {
      if (this.messageContent.trim() && !this.anserLoading) {
        this.$emit("send-message", this.messageContent);
        this.messageContent = "";
      }
    },
    clearMessages() {
      this.$emit("clear-messages");
    },
    ctrlAbout() {
      // console.log("ctrlAbout");
      this.$emit("interrupt-request");
    },
    delectFile(id) {
      this.isUploadFile = false;
      // console.log("delectFile",this.upload.fileList);
      this.upload.fileList = this.upload.fileList.filter((item, index) => {
        return item.id !== id;
      });
    },
    /** 显示常用语 */
    clickLogHandle(item) {
      this.selectCommon = item;
      this.messageContent = item.commonPhrases;
      this.closeHandle();
    },
    hoverLogHandle(id) {
      this.commonId = id;
    },
    /** 显示常用语 */
    commonPhrases1() {
      this.isShowCommon = true;
      if(this.commonPhrasesList.length == 0)return
      this.commonId = this.commonPhrasesList[0].id;
    },
    closeHandle() {
      this.isShowCommon = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        title: null,
        commonPhrases: null,
      };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    editCommon(item) {
      event.stopPropagation();
      this.reset();
      this.form = item;
      this.open = true;
      this.title = "修改常用语";
    },
    /** 新增按钮操作 */
    addCommon() {
      this.reset();
      this.open = true;
      this.title = "添加常用语";
    },
    /** 删除按钮操作 */
    deleteCommon(id) {
      event.stopPropagation();
      this.commonPhrasesList = this.commonPhrasesList.filter((item, index) => {
        return item.id !== id;
      });
      // 保存到 localStorage
      localStorage.setItem('commonPhrasesList', JSON.stringify(this.commonPhrasesList));
    },
    /** 提交按钮 */
    submitForm() {
      if (this.form.id != null) {
        console.log("editCommon", this.form);
        this.$modal.msgSuccess("修改成功");
        this.commonPhrasesList.forEach(element => {
          if(element.id===this.form.id){
            element=this.form
          }
        });
      } else {
        console.log("addCommon", this.form);
        this.$modal.msgSuccess("新增成功");
        this.commonPhrasesList.push({ ...this.form ,id: this.commonPhrasesList.length + 1 })
      }
      // 保存到 localStorage
      localStorage.setItem('commonPhrasesList', JSON.stringify(this.commonPhrasesList));
      this.open = false;
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "上传简历";
      this.upload.open = true;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 取消按钮
    cancel() {
      this.upload.open = false;
      this.upload.synchronous = false;
      this.JDUpdateId = "";
      this.$refs.upload.clearFiles();
    },
    beforeUpload(file) {
      const fileObj = {
        isUploading: true,
        parsing: false,
        uploadError: false,
        fileName: file.name,
        fileType: file.name.split(".").pop(),
        fileSize: (file.size / 1024).toFixed(2) + "KB",
        id: file.uid,
        fileId: "",
      };
      this.upload.fileList.push(fileObj);
      this.upload.open = false;
      if (this.upload.synchronous) {
        const data = {
          baseFileId: this.JDUpdateId,
          synchronous: this.upload.synchronous,
        };
        const formData = new FormData();
        formData.append("file", file);
        const headers = {
          Authorization: "Bearer " + getToken(),
          "Content-Type": "multipart/form-data",
        };
        uploadData(formData, data, headers).then((res) => {
          if (typeof res !== "string" || res.indexOf("文件上传成功") === -1) {
            fileObj.fileId = res.data.data;
            fileObj.isUploading = false;
            fileObj.parsing = true;
            // 模拟解析过程，实际中需要根据后端返回结果处理
            setTimeout(() => {
              fileObj.parsing = false;
            }, 3000);
          } else {
            fileObj.isUploading = false;
            fileObj.parsing = false;
            fileObj.uploadError = true;
          }
        });
      }
    },
  },
};
</script>


<style scoped lang="scss">
.content-footer {
  background-color: #fff;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  display: flex;
  position: sticky;
  bottom: 0;
  padding: 0 20px;
  width: 100%;
}
.footer-input {
  max-width: 100%;
  flex-grow: 1;
  width: 100%;
  position: relative;
}
.footer-input {
  max-width: 100%;
  flex-grow: 1;
  width: 100%;
  position: relative;

  .library-container-outer.top {
    bottom: 100%;
    padding: 10px 20px;
  }
  .library-container-outer {
    position: absolute;
    width: 100%;
  }
  .library-container {
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 10;
    background-color: #fff;
    border: 1px solid #c0c0c0;
    box-shadow: 0px 0px 0px 0.5px #ccc;
    border-radius: 24px;
    color: #666;
    .header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 2px 6px 10px;
      .title {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        flex-grow: 1;
      }
      .close-button {
        cursor: pointer;
        width: 20px;
        height: 20px;
        background-size: 20px;
      }
    }
    .content {
      max-height: 200px;
      overflow-y: auto;
      overflow-x: hidden;
      .item-container.selected {
        background-color: rgba(175, 180, 198, 0.2);
      }
      .item-container {
        div {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
        padding: 6px 10px 6px 8px;
        flex-shrink: 0;
        gap: 8px;
        border-radius: 8px;
        width: 100%;
        box-sizing: border-box;
        .title-container {
          box-sizing: border-box;
          max-width: 100%;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          border-radius: 20px;
          gap: 4px;
          font-size: 12px;
          padding: 2px 10px;
          background-color: #ddd;
        }
        .content {
          display: block;
          font-size: 14px;
          font-style: normal;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          flex-grow: 1;
          font-weight: 400;
          line-height: 24px;
        }
      }
      .item-container.selected .operation {
        display: flex;
        gap: 4px;
      }
      .item-container .operation {
        display: none;
        flex-shrink: 0;
      }
      .item-container .operation .edit-icon {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: center;
      }
      .item-container .operation .delete-icon {
        width: 24px;
        height: 24px;
        border-radius: 8px;
      }
    }
    .bottom {
      height: 36px;
      margin: 10px 0;
      color: #333;
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 6px 8px;
      flex-direction: row;
      border-radius: 8px;
      .add-icon {
        width: 20px;
        height: 20px;
      }
      .add-text {
        font-size: 14px;
        line-height: 24px;
      }
      &:hover {
        background-color: rgba(175, 180, 198, 0.2);
      }
    }
  }
}

.footer-input-content {
  border-color: #536e8c;
}
.footer-input-content.footer-input-content-padding {
  box-shadow: 0px 0px 0px 0.5px #ccc;
  padding: 8px 0 0;
}
.footer-input-content-padding {
  padding: 14px;
  cursor: text;
  box-sizing: border-box;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  // transition: box-shadow var(--ds-transition-duration) var(--ds-ease-in-out);
  box-shadow: none;
  background-color: transparent;
  // background-color: var(--dsr-bg);
  border-radius: 24px;
  flex-direction: column;
  display: flex;
  position: relative;
}
.footer-input-top {
  flex-wrap: wrap;
  gap: 8px;
  max-height: 180px;
  display: flex;
  overflow-y: auto;
  &:hover {
    .delete-icon {
      opacity: 1;
    }
  }
}
.footer-input-paperclipDiv.footer-input-paperclip {
  cursor: pointer;
  transition: box-shadow 0.2sease-in-out;
}
.footer-input-paperclipDiv {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  gap: 10px;
  .paperclipDiv {
    background: #f3f4f6;
    border-radius: 12px;
    // width: calc(33.3333% - 8.33333px);
    transition: background-color 0.3s;
    position: relative;
    align-items: center;
    padding: 8px;
    display: flex;
    .paperclipTextDiv {
      overflow: hidden;
      .paperclipTextDiv-title {
        color: #fff;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #262626;
        min-height: 20px;
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        overflow: hidden;
      }
    }
  }
}

.input-content {
  box-shadow: 0 0 0 0.5px rgba(192, 192, 192, 0.3);
}
.footer-input-content-padding .input-div {
  z-index: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px;
  display: flex;
  overflow: hidden;
}
.footer-input-content-padding .input-content {
  background: #f3f4f6;
  box-shadow: 0px 0px 0px 0.5px #ccc;
  border-radius: 24px;
}
.footer-input-content-padding .input-content-div {
  width: 100%;
  // max-height: calc(12 * var(--ds-line-height-l));
  margin: 0 4px;
  position: relative;
  textarea {
    &:focus-visible {
      outline: none;
    }
  }
}
.footer-input-content-padding .input-textarea {
  resize: none;
  color: #ccc;
  caret-color: #ccc;
  background-color: transparent;
  position: absolute;
}
.footer-input-content-padding .input-textarea,
.footer-input-content-padding .div-textarea {
  font-size: inherit;
  line-height: inherit;
  word-break: break-word;
  white-space: pre-wrap;
  border: none;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: inherit;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
.footer-input-content-padding .div-textarea {
  visibility: hidden;
  pointer-events: none;
  min-height: 56px;
}
.footer-input-content-padding .input-textarea,
.footer-input-content-padding .div-textarea {
  word-break: break-word;
  white-space: pre-wrap;
  border: none;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: inherit;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  color: #555;
}
.footer-input-content-padding .footer-icon {
  --function-row-offset: 2px;
  width: calc(100% - 20px);
  padding-left: 4px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
  display: flex;
}
.d9f56c96 {
  border: 1px solid #ccc;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  height: 28px;
  margin-right: 10px;
  padding: 0 7px;
  display: flex;
}
.footer-input-content-padding .footer-icon-outer {
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.footer-icon-right {
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.footer-icon-paperclip {
  color: #cdd4df;
}
.footer-icon-paperclip {
  color: #4c4c4c;
  cursor: pointer;
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin-top: auto;
  margin-right: 10px;
  display: flex;
}
.footer-icon-send {
  // color: #f8faff;
  // background-color: #4d6bfe;
}
.footer-icon-send {
  white-space: nowrap;
  cursor: pointer;
  // color: #fff;
  // background: #4d6bfe;
  border: none;
  border-radius: 16px;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  min-width: 32px;
  height: 32px;
  margin-top: auto;
  display: flex;
}

.footer-icon-send .footer-icon-send-outer {
  justify-content: center;
  align-items: center;
  min-width: 28px;
  height: 28px;
  display: flex;
}
.el-upload__select {
  margin: 10px 0;
}
.editor-modal {
    --description-color: #5e6772;
    --content-bg: #ffffff;
    --content-border: #e5e5e5;
    --content-border-hover: #adadad;
    --name-bg: #f3f5fc;
    --intro-text: #5e6772;
    --action-text: #2e67fa;
}
.editor-modal {
  display: flex;
  flex-direction: column;
  height: 440px;
  .header {
    flex-shrink: 0;
    position: relative;
  }
  .subtitle {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 24px;
  }
  .description {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 20px;
    color: var(--description-color);
  }
  .content {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--content-border);
    background-color: var(--content-bg);
    transition: border-color 0.3s cubic-bezier(0.36, 0.66, 0.04, 1);
    cursor: text;
    margin-bottom: 40px;
    .spin-content-wrapper {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
  }
  .input-area {
    padding: 8.5px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    background-color: transparent;
    border: none;
    color: var(--text-primary);
    &:focus-visible{
      outline: none;
    }
  }
  .name-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: var(--name-bg);
    width: 100%;
  }
  .intro {
    color: var(--intro-text);
    padding: 12px;
    font-size: 12px;
    cursor: pointer;
    flex-grow: 1;
  }
  .input {
    padding-left: 12px;
    flex-grow: 1;
    border: none;
    outline: none;
    color: var(--text-primary);
    background-color: transparent;
}
  .action {
    cursor: pointer;
    padding: 12px;
    color: var(--action-text);
    flex-shrink: 0;
  }
  .spin-container {
    position: relative;
  }
  .bottom {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}
</style>
<style lang="scss">
.aq-input {
  .el-input__inner {
    background: #f3f4f6;
  }
}
.common-phrases-dialog{
  &.el-dialog {
    --modal-bg: #f3f5fc;
    --modal-border: #e5e5e5;
    --modal-content: #5e6772;
    --modal-header-color: #060607;
  }
  &.el-dialog {
    color: var(--modal-header-color);
    border-radius: 8px;
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    min-width: 360px;
    .el-dialog__body{
      padding-top: 0;
    }
  }
}
</style>